<template>
    <div>
        <div>
            <el-button type="primary" @click="handleAdd"c size="small">添加</el-button>
        </div>
        <el-table :data="data" style="width: 100%" stripe :height="500">
            <!-- <el-table-column prop="id" label="ID" width="80">
            </el-table-column> -->
            <el-table-column prop="name" label="权限">
            </el-table-column>
            <el-table-column prop="code" label="编码">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center" v-if="!smallPaginition">
                <template slot-scope="scope">

                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" style="color:red"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  @size-change="refresh" @current-change="refresh" style="margin-top: 10px;" :current-page.sync="page.current" :page-sizes="[5, 10, 20, 50]"
            :page-size.sync="page.pageSize" :layout="layout" :total="total" :small="smallPaginition">
        </el-pagination>

        <el-dialog title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer" >
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getPermissionList, deletePermission, updatePermission,addPermission } from "@/api/user"
export default {
    name: "permisison",
    created() {
        this.refresh()
    },
    data() {
        return {
            title:"",
            layout:"total, sizes, prev, pager, next, jumper",
            smallPaginition:false,
            ruleForm: { id: null, name: "", code: "" },
            rules: {
                name: [
                    { required: true, message: '请输入权限名称', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入权限编码', trigger: 'blur' },
                ],
            },
            data: null,
            dialogVisible: false,
            total: 0,
            page: {
                "current": 0,
                "pageSize": 20
            }
        }
    },
    mounted() {
		this.handleResize();
		window.addEventListener('resize', this.handleResize);
	},
    methods: {
        handleResize() {
			if (document.body.clientWidth < 768) {
				this.smallPaginition=true
				this.layout = "prev, pager, next"
                
			} else {
                this.smallPaginition=false
                this.layout ="total, sizes, prev, pager, next, jumper"
                
			}},
        handleAdd(){
            this.title="添加权限"
            this.dialogVisible=true;
        },
        handleClose() {
            this.ruleForm.name = ""
            this.ruleForm.code = ""
            this.ruleForm.id=null
            this.title=""
            this.$refs.ruleForm.clearValidate()
            this.dialogVisible = false
        },
        handleConfirm() {
            if(this.title=="添加权限"){
                this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    addPermission(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            this.$message.success("添加成功")
                            this.handleClose()
                            this.refresh()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
            }
            if(this.title=="修改权限"){
                this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    updatePermission(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            this.$message.success("修改成功")
                            this.handleClose()
                            this.refresh()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
            }
           
        },
        refresh() {
            getPermissionList(this.page).then(res => {
                this.data = res.data.records;
                this.total = res.data.total;
            })
        },
        handleEdit(row) {
            this.title="修改权限"
            this.ruleForm = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        handleDelete(row) {
            this.$confirm('确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePermission(row.id).then(res => {
                    if (res.code == 200) {
                        this.$message.success("已删除")
                        this.refresh();
                    } else {
                        this.$message.error(res.message)
                    }

                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }

};
</script>

<style></style>